<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 待产包准备</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding: 16px;
                background-color: #f9f9f9;
            }
            .card {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 16px;
            }
            .card-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
            }
            .card-title i {
                margin-right: 8px;
                color: #ff9fb5;
            }
            .tabs {
                display: flex;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 4px;
                margin-bottom: 16px;
            }
            .tab {
                flex: 1;
                text-align: center;
                padding: 8px 0;
                font-size: 14px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .tab.active {
                background-color: #fff;
                color: #ff9fb5;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .progress-container {
                height: 6px;
                background-color: #f0f0f0;
                border-radius: 3px;
                margin: 8px 0;
                overflow: hidden;
            }
            .progress-bar {
                height: 100%;
                background-color: #ff9fb5;
                border-radius: 3px;
            }
            .checklist-item {
                display: flex;
                padding: 12px 0;
                border-bottom: 1px solid #f0f0f0;
                align-items: center;
            }
            .checklist-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
            .checklist-checkbox {
                margin-right: 12px;
                width: 20px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid #ddd;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                cursor: pointer;
                flex-shrink: 0;
            }
            .checklist-checkbox.checked {
                background-color: #ff9fb5;
                border-color: #ff9fb5;
            }
            .checklist-label {
                flex: 1;
            }
            .checklist-label.checked {
                text-decoration: line-through;
                color: #999;
            }
            .checklist-quantity {
                color: #666;
                font-size: 14px;
                margin-left: 10px;
            }
            .add-item-button {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 0;
                margin-top: 12px;
                border: 1px dashed #ddd;
                color: #666;
                border-radius: 8px;
                cursor: pointer;
            }
            .add-item-button i {
                margin-right: 6px;
            }
            .category-header {
                font-weight: 600;
                margin-top: 16px;
                margin-bottom: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .category-header .category-name {
                font-size: 15px;
                color: #333;
            }
            .category-header .category-count {
                font-size: 13px;
                color: #666;
            }
            .stage-tag {
                display: inline-block;
                padding: 3px 8px;
                font-size: 12px;
                border-radius: 4px;
                margin-right: 5px;
            }
            .stage-tag.early {
                background-color: #e6f7ff;
                color: #1890ff;
            }
            .stage-tag.middle {
                background-color: #fff7e6;
                color: #fa8c16;
            }
            .stage-tag.late {
                background-color: #fff0f5;
                color: #ff85c0;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">待产包准备</h1>
                </div>
                <div class="flex gap-3">
                    <i class="fas fa-share-alt"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 准备进度卡片 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-clipboard-check"></i>
                        <span>准备进度</span>
                    </div>

                    <div class="flex justify-between items-center mt-1 mb-2">
                        <div class="text-sm text-gray-700">当前孕周：第32周</div>
                        <div class="text-sm font-medium text-pink-500">建议35周前完成</div>
                    </div>

                    <div class="flex justify-between items-center mb-1">
                        <div class="text-xs text-gray-500">物品准备进度</div>
                        <div class="text-xs font-medium">15/28项</div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 54%"></div>
                    </div>

                    <!-- 准备阶段 -->
                    <div class="flex mt-4 text-sm">
                        <div class="flex-1 text-center">
                            <div class="stage-tag early">早期准备</div>
                            <div class="text-xs mt-1 text-gray-600">10/10项</div>
                        </div>
                        <div class="flex-1 text-center">
                            <div class="stage-tag middle">中期准备</div>
                            <div class="text-xs mt-1 text-gray-600">5/12项</div>
                        </div>
                        <div class="flex-1 text-center">
                            <div class="stage-tag late">临产准备</div>
                            <div class="text-xs mt-1 text-gray-600">0/6项</div>
                        </div>
                    </div>
                </div>

                <!-- 待产包清单 -->
                <div class="card">
                    <div class="card-title">
                        <i class="fas fa-suitcase-medical"></i>
                        <span>待产包清单</span>
                    </div>

                    <!-- 清单类别选项卡 -->
                    <div class="tabs">
                        <div class="tab active">妈妈用品</div>
                        <div class="tab">宝宝用品</div>
                        <div class="tab">住院证件</div>
                    </div>

                    <!-- 妈妈用品类别 -->
                    <div class="checklist-category" id="mother-items">
                        <!-- 入院期间 -->
                        <div class="category-header">
                            <div class="category-name">入院期间</div>
                            <div class="category-count">6/8项</div>
                        </div>

                        <!-- 具体物品列表 -->
                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">孕妇待产裙</div>
                            <div class="checklist-quantity">x2</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">拖鞋</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">毛巾</div>
                            <div class="checklist-quantity">x3</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">漱口杯</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">护肤品套装</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">月子牙刷</div>
                            <div class="checklist-quantity">x2</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">产妇卫生巾</div>
                            <div class="checklist-quantity">x2包</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">防溢乳垫</div>
                            <div class="checklist-quantity">x1盒</div>
                        </div>

                        <!-- 添加物品按钮 -->
                        <div class="add-item-button">
                            <i class="fas fa-plus"></i>
                            <span>添加物品</span>
                        </div>

                        <!-- 产后恢复 -->
                        <div class="category-header">
                            <div class="category-name">产后恢复</div>
                            <div class="category-count">4/6项</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">收腹带</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">哺乳内衣</div>
                            <div class="checklist-quantity">x3</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">哺乳衫</div>
                            <div class="checklist-quantity">x2</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">防溢乳垫</div>
                            <div class="checklist-quantity">x1盒</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">乳头保护霜</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">吸奶器</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <!-- 添加物品按钮 -->
                        <div class="add-item-button">
                            <i class="fas fa-plus"></i>
                            <span>添加物品</span>
                        </div>
                    </div>

                    <!-- 宝宝用品类别 -->
                    <div class="checklist-category hidden" id="baby-items">
                        <!-- 基础用品 -->
                        <div class="category-header">
                            <div class="category-name">基础用品</div>
                            <div class="category-count">3/6项</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">婴儿衣服</div>
                            <div class="checklist-quantity">x5套</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">初生帽子</div>
                            <div class="checklist-quantity">x2</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">婴儿袜子</div>
                            <div class="checklist-quantity">x3双</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">婴儿抱被</div>
                            <div class="checklist-quantity">x2</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">尿不湿</div>
                            <div class="checklist-quantity">x1包</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">婴儿湿巾</div>
                            <div class="checklist-quantity">x2包</div>
                        </div>

                        <!-- 添加物品按钮 -->
                        <div class="add-item-button">
                            <i class="fas fa-plus"></i>
                            <span>添加物品</span>
                        </div>

                        <!-- 洗护用品 -->
                        <div class="category-header">
                            <div class="category-name">洗护用品</div>
                            <div class="category-count">2/4项</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">婴儿洗发水</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">婴儿沐浴露</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">护臀霜</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">婴儿油</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <!-- 添加物品按钮 -->
                        <div class="add-item-button">
                            <i class="fas fa-plus"></i>
                            <span>添加物品</span>
                        </div>
                    </div>

                    <!-- 住院证件类别 -->
                    <div class="checklist-category hidden" id="document-items">
                        <!-- 必备证件 -->
                        <div class="category-header">
                            <div class="category-name">必备证件</div>
                            <div class="category-count">4/5项</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">身份证</div>
                            <div class="checklist-quantity">夫妻双方</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">结婚证</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">医保卡</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">产检手册</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">出生证明办理资料</div>
                            <div class="checklist-quantity">x1套</div>
                        </div>

                        <!-- 添加物品按钮 -->
                        <div class="add-item-button">
                            <i class="fas fa-plus"></i>
                            <span>添加物品</span>
                        </div>

                        <!-- 其他物品 -->
                        <div class="category-header">
                            <div class="category-name">其他物品</div>
                            <div class="category-count">3/4项</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">现金/银行卡</div>
                            <div class="checklist-quantity">适量</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">手机与充电器</div>
                            <div class="checklist-quantity">x1套</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox checked">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="checklist-label checked">记录本和笔</div>
                            <div class="checklist-quantity">x1套</div>
                        </div>

                        <div class="checklist-item">
                            <div class="checklist-checkbox"></div>
                            <div class="checklist-label">备用眼镜</div>
                            <div class="checklist-quantity">x1</div>
                        </div>

                        <!-- 添加物品按钮 -->
                        <div class="add-item-button">
                            <i class="fas fa-plus"></i>
                            <span>添加物品</span>
                        </div>
                    </div>
                </div>

                <!-- 待产建议卡片 -->
                <div class="card mb-8">
                    <div class="card-title">
                        <i class="fas fa-lightbulb"></i>
                        <span>准备建议</span>
                    </div>

                    <div class="bg-blue-50 p-3 rounded-lg">
                        <div class="text-sm font-medium text-blue-800 mb-2">准备时间建议</div>
                        <div class="text-xs text-blue-700">
                            建议在孕32-35周之间完成待产包准备，既不会太早遗漏物品，也能避免临产时手忙脚乱。可根据三个阶段（早、中、晚期）有序准备。
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <script>
            // 选项卡切换功能
            document.addEventListener('DOMContentLoaded', function () {
                const tabs = document.querySelectorAll('.tab');
                const categories = document.querySelectorAll('.checklist-category');

                // 初始化显示第一个选项卡内容
                showCategory('mother-items');

                tabs.forEach((tab, index) => {
                    tab.addEventListener('click', function () {
                        // 移除所有active类
                        tabs.forEach((t) => t.classList.remove('active'));
                        // 给当前点击的tab添加active类
                        this.classList.add('active');

                        // 隐藏所有类别
                        categories.forEach((category) => {
                            category.classList.add('hidden');
                        });

                        // 显示对应类别
                        if (index === 0) {
                            showCategory('mother-items');
                        } else if (index === 1) {
                            showCategory('baby-items');
                        } else if (index === 2) {
                            showCategory('document-items');
                        }
                    });
                });

                // 复选框点击事件
                const checkboxes = document.querySelectorAll('.checklist-checkbox');
                checkboxes.forEach((checkbox) => {
                    checkbox.addEventListener('click', function () {
                        this.classList.toggle('checked');
                        if (this.classList.contains('checked')) {
                            this.innerHTML = '<i class="fas fa-check"></i>';
                            this.nextElementSibling.classList.add('checked');
                        } else {
                            this.innerHTML = '';
                            this.nextElementSibling.classList.remove('checked');
                        }
                        updateProgress();
                    });
                });

                // 辅助函数 - 显示指定类别
                function showCategory(id) {
                    document.getElementById(id).classList.remove('hidden');
                }

                // 辅助函数 - 更新进度
                function updateProgress() {
                    // 简单示例，实际应用中可以计算真实进度
                    console.log('更新进度');
                }
            });
        </script>
    </body>
</html>
